<template>
    <div class="comment-item" >
      <avatar :src="avatar" :size="32"></avatar>
      <div class="text-container">
        <div class="top-info">
          <div class="name">{{name}} <slot name="name-after"></slot> </div>
          <div class="note" v-if="time">{{time | formatDate('yyyy-MM-dd hh:mm:ss')}}</div>
          <slot name="r-top"></slot>
        </div>
        <div class="title" v-if="title">{{title}}</div>
        <div class="comment-body" v-if="content">
          {{content}}
        </div>
        <slot></slot>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Title',
  props:{
      avatar:String,
      title:String,
      name: String,
      time:String,
      label:String,
      content:String

  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.comment-list
  margin-bottom: 15px
.comment-item
  background: #fff
  padding: 10px $spacing
  display: flex
  & + &
    fine-border(top, $border-light)
  .avatar-box
    margin-right: 10px
  .top-info
    display: flex
    align-items: center
    justify-content: space-between
    margin-bottom: 10px
  .title
    font-size: $font-md
    color: $text-dark
    margin-bottom: 5px
  .comment-body
    font-size: 14px
    line-height: 1.8
    font-weight: 300
    color: $text-dark
</style>
